<template>

    <div>
        <header class="header"></header>
        <main class="main">
            <div v-for="item in data">
                {{ item }}
                <slot :data="item"></slot>
            </div>

        </main>
        <footer class="footer">
            <slot name="footer"></slot>
        </footer>

    </div>

</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';

type names = {
    name: string,
    age: number
}
const data = reactive<names[]>([{
    name: '张三',
    age: 20
}, {
    name: '李四',
    age: 20

},
{
    name: '李6',
    age: 20

}])
</script>
<style scoped>
* {
    width: 500px;
}

.header {
    height: 200px;
    background: red;
    color: white;
}

.main {
    height: 300px;
    background: blue;
    color: white;
}

.footer {
    height: 200px;
    background: green;
    color: white;
}
</style>